<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>

    <script type="text/javascript">
    //-----------------------div滑动
    var add=1.2;      //滑动展开速度 越大越快
    var count=0;    //递增初始值
    var countT=0;
    var act;
    function over(s,nMax){
      var obj=document.getElementById(s);
      var h = parseInt(obj.offsetHeight);
      if (h+count < nMax){
        obj.style.height = (h + count)+"px";
        clearTimeout(act);
        act = setTimeout("over('"+s+"',"+nMax+")", 10);
        count +=add;
      }
      else{
        obj.style.height = nMax+"px";
        count=0;
      }
    }

    function out(s,nMin){
      var obj=document.getElementById(s);
      var h = parseInt(obj.offsetHeight);
      if (h-count > nMin){
        obj.style.height = (h - count)+"px";
        clearTimeout(act);
        act = setTimeout("out('"+s+"',"+nMin+")", 10);
        count +=add;
      }
      else{
        obj.style.height = nMin+"px";
        count=0;
      }
    }
    
    //---------------------------------
    
    function deploy(a,b,c,d,nMax,nMin){
        document.getElementById(a).style.width=nMin+'px';
        document.getElementById(b).style.width=nMin+'px';
        document.getElementById(c).style.width=nMin+'px';
        overT(d,nMax);
    }
    
    function overT(s,nMax){
      var obj=document.getElementById(s);
      var h = parseInt(obj.offsetWidth);
      if (h+countT < nMax){
        obj.style.width = (h + countT)+"px";
        clearTimeout(act);
        act = setTimeout("overT('"+s+"',"+nMax+")", 10);
        countT +=add;
      }
      else{
        obj.style.width = nMax+"px";
        countT=0;
      }
    }
    
    var ran;
    var ranW;
    var r=0;
    function randoms(){
         ran = parseInt(Math.random()*(4)+1);
         ranW = parseInt(Math.random()*(1000)+60);
         if(ran!=r){
             switch(ran){
                case 1:deploy('div2','div3','div4','div1',ranW,40);r==ran;break;
                case 2:deploy('div1','div3','div4','div2',ranW,40);r==ran;break;
                case 3:deploy('div1','div2','div4','div3',ranW,40);r==ran;break;
                default :deploy('div1','div2','div3','div4',ranW,40);r==ran;
             }
         }
         setTimeout("randoms()",50);
    }
    </script>

    <script language="javascript" type="text/javascript">
    
    var heights=200;
    var speed=4;
    var timeout;
    
    function testOpen(id){
        var obj=document.getElementById(id);
        var y = parseInt(obj.style.height,10);
        
        if (y < heights){
            
            obj.style.height = (y + Math.ceil((heights - y)/speed))+"px";   //递增
            clearTimeout(timeout);
            timeout = setTimeout("testOpen('"+id+"')", 6);
            
        }
        else{
            obj.style.height = heights+"px";
        }
    }
    
    function testClose(id){
        var obj = document.getElementById(id);
        var y = parseInt(obj.style.height,10);
        
        if ( y>1){
            
            var value = (y - Math.ceil(y/speed))    //递增
            value = value == 0?1:value;
            
            obj.style.height=value+"px";
            clearTimeout(timeout);
            timeout = setTimeout("testClose('"+id+"')", 6);
            
        }
        else{
            obj.style.height = 1+"px";
        }
    }
    
    </script>

</head>
<body>
    <!--onload="randoms();"-->
    <div id="mytd" onmouseover="over('mytd',200);" onmouseout="out('mytd',20);" style="height: 20px;
        background: #ff0066;">
        代码实例：层的滑动展开/折叠</div>
    <br />
    <br />
    <br />
    <div id="div1" style="height: 20px; width: 40px; background: #99ccff" onmouseover="deploy('div2','div3','div4','div1',1000,40);">
        DIV
    </div>
    <div id="div2" style="height: 20px; width: 40px; background: #66FFFF" onmouseover="deploy('div1','div3','div4','div2',1000,40);">
        DIV
    </div>
    <div id="div3" style="height: 20px; width: 40px; background: #0000ff" onmouseover="deploy('div1','div2','div4','div3',1000,40);">
        DIV
    </div>
    <div id="div4" style="height: 20px; width: 40px; background: #000000" onmouseover="deploy('div1','div2','div3','div4',1000,40);">
        DIV
    </div>
    <br />
    <br />
    <br />
    <button id="button2" onclick="testOpen('div5');">
        open</button>
    <button id="Button1" onclick="testClose('div5');">
        close</button>
    <div id="div5" style="height: 1px; width: 40px; background: #66FFFF">
        DIV
    </div>
</body>
</html>